<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>代码生成模块</title>
    <script src="js/jquery.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app" style="font-size: 10px;margin:10px;">
        <el-form :inline="true" :model="selected" class="demo-form-inline">
            <el-form-item label="表名">
                <el-select v-model="selected" value-key="jdbcName" @change="searchTableColumns()" placeholder="请选择">
                    <el-option
                        v-for="item in lists"
                        :key="item.id"
                        :label="item.jdbcName"
                        :value="item">
                        <span style="float: left">{{ item.jdbcName }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.comments }}</span>
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="实体类名">
                <el-input v-model="selected.javaName" placeholder="实体类名"></el-input>
            </el-form-item>

            <el-form-item label="关联表">
                <el-input v-model="selected.parentTable" placeholder="关联表"></el-input>
            </el-form-item>
            <el-form-item label="关联表外键">
                <el-input v-model="selected.parentTableFk" placeholder="关联表外键"></el-input>
            </el-form-item>

            <el-button type="primary" icon="el-icon-edit" @click="saveColumns()"></el-button>
            
            <br/><br/>
            <hr/>
            <br/>
        </el-form>
        <el-table :data="tables" border style="width: 100%">
            <el-table-column type="index" label="编号" width="70" align="center"></el-table-column>
            <el-table-column prop="jdbcName"  label="名称(数据库)" align="center"></el-table-column>
            <el-table-column prop="javaName" label="名称(java)" align="center"></el-table-column>
            <el-table-column prop="comments" label="备注" align="center"></el-table-column>
            <el-table-column prop="jdbcType" label="类型(数据库)" align="center"></el-table-column>
            <el-table-column prop="javaType" label="类型(java)" align="center"></el-table-column>
            <el-table-column prop="isPk" label="key" align="center"></el-table-column>
            <el-table-column prop="isQuery" label="查询" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isQuery" active-value="1" inactive-value="0"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="queryType" label="查询类型" align="center">
                <template slot-scope="scope">
                    <el-select v-model="scope.row.queryType" clearable size="small">
                        <el-option key="=" label="=" value="="></el-option>
                        <el-option key=">" label=">" value=">"></el-option>
                        <el-option key="<" label="<" value="<"></el-option>
                        <el-option key="!=" label="!=" value="!="></el-option>
                        <el-option key="LIKE" label="LIKE" value="LIKE"></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="isNull" label="isnull" align="center"></el-table-column>
            <el-table-column prop="isInsert" label="添加" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isInsert" active-value="1" inactive-value="0"
                    style="display: block"></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="isEdit" label="编辑" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.isEdit" active-value="1" inactive-value="0" ></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="length" label="长度" align="center"></el-table-column>
            <el-table-column prop="dictType" label="字典类型" align="center"></el-table-column>
            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        </el-table>


        <hr/>
    </div>
    <script>
        var datum = "正在加载数据。。。。";
        new Vue({
            el: '#app',
            data: {
                lists:[],
                selected:'',
                success: '',
                tables:[],
                columns1:[],
                item:[]
            },
            beforeCreate: function(){
                var _self=this;
                $.get('http://localhost:8080/moyun/table/database',function(result){
                    if (result.code == 0) {
                        _self.lists = result.data;
                        //_self.$message({type: 'success', message: '读取成功'});
                    } else {
                        _self.$notify.error({
                            title: '错误',
                            message: '数据读取失败'
                        });
                    }
                });
            },
            methods: {
                searchTableColumns: function(){
                    var _self=this;
                    let url = "http://localhost:8080/moyun/column/database";
                    if (_self.selected.id != null) {
                        url = "http://localhost:8080/moyun/column?tId="+_self.selected.id;
                    }

                    $.get(url,{
                        table:_self.selected.jdbcName
                    },function(result){
                        if (result.code == 0) {
                            _self.tables = result.data;
                           // _self.$message({type: 'success', message: '读取成功'});
                        } else {
                            _self.$notify.error({
                                title: '错误',
                                message: _self.selected.jdbcName+',读取失败'
                            });
                        }
                    });
                },
                switchChange:function(key) {
                    alert(key);
                },
                saveColumns: function () {
                    var _self=this;
                    var data = {
                        table:_self.selected,
                        columns:_self.tables
                    };
                    //console.log(JSON.stringify(data));
                    $.ajax({
                        type:'POST',
                        url: 'http://localhost:8080/moyun/column',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data),
                        dataType: 'json',
                        success: function (result){
                            if (result.code == 0) {
                                _self.$notify({
                                    title: '成功',
                                    message: _self.selected.jdbcName+",保存成功",
                                    type: 'success'
                                });
                                //_self.$message({type: 'success', message: '读取成功'});
                            } else {
                                _self.$notify.error({
                                    title: '错误',
                                    message: _self.selected.jdbcName+',保存失败'
                                });
                            }
                        },
                        error: function(result){
                            _self.$notify.error({
                                title: '错误',
                                message: _self.selected.jdbcName+',保存失败'
                            });
                        }
                    });
                }
            }
        })
    </script>
</body>
</html>